<template>
	<view class="wrap">
		<view class="filter">
			<view class="filter-picker" :class="{active: showPicker}" @click="showPicker = true">近7天</view>
			<view class="filter-total">
				<text>收入￥1000.00</text>
				<text>支出￥1000.00</text>
			</view>
		</view>
		<view class="list">
			<view class="item bw">
				<view class="item-T app_flex-jcsb">
					<view>客户名字电话</view>
					<view>￥19000.00</view>
				</view>
				<view class="item-B app_flex-jcsb">
					<view>销售单号码</view>
					<view>2020-02-12 09:34</view>
				</view>
			</view>
			<view class="item bw">
				<view class="item-T app_flex-jcsb">
					<view>客户名字电话</view>
					<view>￥19000.00</view>
				</view>
				<view class="item-B app_flex-jcsb">
					<view>销售单号码</view>
					<view>2020-02-12 09:34</view>
				</view>
			</view>
			<view class="item bw">
				<view class="item-T app_flex-jcsb">
					<view>客户名字电话</view>
					<view>￥19000.00</view>
				</view>
				<view class="item-B app_flex-jcsb">
					<view>销售单号码</view>
					<view>2020-02-12 09:34</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPicker" border-radius="10" mode="bottom">
			<view class="pop">
				<view class="popItem h100 app_flex-aicjcc" :class="{active: popIndex == 0}">近7天</view>
				<view class="popItem h100 app_flex-aicjcc" :class="{active: popIndex == 1}">近1个月</view>
				<view class="popItem h100 app_flex-aicjcc" :class="{active: popIndex == 2}">近半年</view>
				<view class="popItem h100 app_flex-aicjcc" :class="{active: popIndex == 3}">近1年</view>
				<view class="gap"></view>
				<view class="popItem h100 app_flex-aicjcc">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker: false,
				popIndex: 0,
				dateType: 0, // 0 -近7天 1 -近一月 2 -近半年 3-近一年
				detailType: 0, // 0 -账户明细 1-佣金明细
				list: [],
				page: 1,
				totalPage: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.totalPage = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			getList() {
				this.$g_api.accountDetailt({
					pageNum: this.page,
					pageSize: this.size,
					dateType: this.dateType,
					detailType: this.detailType,
				}).then(({
					rows,
					totalPage
				}) => {
					uni.stopPullDownRefresh()
					this.hasLoad = true
					this.totalPage = totalPage
					if (rows?.length > 0) {
						// rows.forEach(item => {
						// 	item.createDateStr = new Date(item.createDate).Format('yyyy-MM-dd')
						// 	// item.secretTel = item.tel.slice(0, 3) + '****' + item.tel.slice(7, 11)
						// 	item.logoImg = this.$g_util.concatRequestUrl(item.logoImg)
						// 	item.url = this.$g_util.concatRequestUrl(item.url)
						// })
						this.list = this.list.concat(rows)
					} else {
						this.noMore = true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.filter {
		padding: 20rpx 30rpx;
	}

	.filter-picker {
		display: inline-block;
		margin-bottom: 14rpx;
		font-size: 30rpx;
		line-height: 1;
		padding-right: 30rpx;
		position: relative;

		&::after {
			position: absolute;
			right: 0;
			top: 50%;
			content: '';
			width: 14rpx;
			height: 14rpx;
			border-top: 1px solid #888;
			border-right: 1px solid #888;
			transform: translateY(-80%) rotate(135deg);
			transition: all 0.3s;
		}

		&.active {
			&::after {
				transform: translateY(-30%) rotate(-45deg);
			}
		}
	}

	.filter-total {
		font-size: 24rpx;
		color: #999;

		text {
			&:last-child {
				margin-left: 30rpx;
			}
		}
	}

	.list {}

	.item {
		line-height: 1.1;
		padding: 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-T {
		margin-bottom: 28rpx;
		font-size: 30rpx;

		view {
			&:last-child {
				color: #ff9933;
			}
		}
	}

	.item-B {
		font-size: 24rpx;

		view {
			&:last-child {
				color: #999;
			}
		}
	}

	.pop {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.popItem {
		font-size: 30rpx;
		border-bottom: 1px solid $g-border-color;

		&.active {
			color: #ff9933;
		}
	}

	.gap {
		background-color: $g-main-bg;
		width: 750rpx;
		height: 20rpx;
	}
</style>
